<template>
  <!-- 咨询弹窗 -->
  <div class="cus-modal" v-if="popup"  @touchmove.stop.prevent="moveStop">
  	<div class="master-hit-box">
  		<div class="master-hit-close" @click="close">
  			X
  		</div>
  		<img class="master-hit-img" src="./img/add-teacher-bg.png">
      <div class="master-wxcode">
        <div class="wxcode-tips">· 咨询运势 ·</div>
        <div class="master-wxcode-box">
            <img class="master-wxcode-img-box" src="./img/add-teacher-code.png">
            <img class="master-wxcode-img" src="../../static/images/getCode/wx_code.jpeg" alt="二维码">
        </div>
      </div>
      <div class="master-tips-box">
        <img class="master-tips" src="./img/add-teacher-tips.png">
        <div class="code-tips">
          <div>长按识别二维码</div>
          <div>八字解读、转运服务，扫码添加老师</div>
        </div>
      </div>
      <div class="master-tips2-box">
        <img class="master-tips2" src="./img/add-teacher-tips2.png">
      </div>
  	</div>
  </div>
</template>

<script>
import { appProductId } from "@/http/env.js";
import { getProductConfigApi } from "@/http/api.js";
export default {
  name: 'teacher-modal',
  data() {
    return {
      positionId: 99,
      popup: false,
      codeImg: ''
    }
  },
  methods: {
		moveStop() {},
    open() {
      // 获取产品线配置
      getProductConfigApi({
        parentId: appProductId,
        positionType: this.positionId
      }).then(res => {
        if (res.code === 200 && res.data.length != 0) {
          this.codeImg = res.data[0].imageLinks;
        }
      })
      this.popup = true
    },
    close(e) {
      this.popup = false
    }
  }}
</script>

<style lang="scss" scoped>
.cus-modal {
  	background-color: rgba(0,0,0,.6);
  	height: 100%;
  	width: 100%;
  	overflow: hidden;
  	position: fixed;
  	top: 0;
  	max-width: 960px;
  	z-index: 10000;
  	display: flex;
  	flex-direction: row;
  	align-items: flex-end;
  	left: var(--window-left);
}
.master-hit-box {
  width: 80%;
  max-width: 414px;
  margin:auto;
  box-sizing: border-box;
  position: relative;
  .master-hit-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    font-weight: 700;
    font-size: 36rpx;
    line-height: 72rpx;
    color: #666;
    cursor: pointer;
    z-index: 50;
  }
  .master-hit-img {
    width: 100%;
    z-index: 49;
  }
  .master-wxcode {
    width: 100%;
    height: 40%;
    position: absolute;
    z-index: 50;
    bottom: 500rpx;
    text-align: center;
    .wxcode-tips {
      font-size: 30rpx;
      line-height: 30rpx;
      font-weight: bold;
      letter-spacing: 2rpx;
      margin-bottom: 10rpx;
    }
    .master-wxcode-box {
      position: absolute;
      width: 100%;
      height: 88%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .master-wxcode-img-box {
        position: absolute;
        height: 100%;
      }
      .master-wxcode-img {
        position: absolute;
        height: 76%;
        bottom: 13%;
      }            
    }
  }
  .master-tips-box {
    width: 100%;
    position: absolute;
    z-index: 50;
    bottom: 240rpx;
    text-align: center;
    .master-tips {
      width: 45%;
    }
    .code-tips {
      font-size: 26rpx;
      line-height: 30rpx;
      font-weight: bold;
    }
  }
  .master-tips2-box {
    width: 100%;
    position: absolute;
    z-index: 50;
    bottom: 80rpx;
    text-align: center;
    .master-tips2 {
      width: 80%;
    }
  }
}
</style>